<template>
	<view class="staff-form">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" :ref="formRef">
			<u-form-item class="form-item" label="员工姓名" labelWidth="100" prop="realname">
				<u-input v-model="formData.realname" placeholder="请输入员工姓名"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系电话" labelWidth="100" prop="contact_phone">
				<u-input type="number" v-model="formData.contact_phone" placeholder="请输入联系电话，登录时的手机账号"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="登录密码" labelWidth="100" prop="pass">
				<u-input type="password" v-model="formData.pass" placeholder="请输入登录密码"></u-input>
			</u-form-item>
		</u-form>

		<view class="footer">
			<view class="btn-group">
				<u-button class="btn" type="primary" size="large" block @click="saveInfo()">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '添加员工',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		staff_id: 0,
		formData: {
			realname: '',
			contact_phone: '',
			pass: '',
			store_id: 0,
			user_type: 2,
		},
	});

	const rules = ref([]);
	const formRef = ref();

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		let selStore = cache.get('selStore');
		if (selStore) {
			state.formData.store_id = selStore.id;
			state.formData.user_type = selStore.user_type;
		}
		if (opt.hasOwnProperty('staff_id')) {
			console.log('传递参数', opt.staff_id);
			state.staff_id = opt.staff_id;
			state.title = '更新员工信息';
			getDetail();
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail() {
		console.log('详情');
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		staff_id,
		formData,
	} = toRefs(state);
</script>

<style lang="scss">
	.staff-form {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.form {
			padding: $m24;

			.form-item {
				background: #fff;
				margin-bottom: $m16;
				padding: 0 $m24;
				border-radius: 10rpx;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {
				.btn {}
			}
		}
	}
</style>